<template>
  <div class="todo-header">
    <input
      type="text"
      placeholder="请输入你的任务名称，按回车键确认"
     @keydown.enter="showss"
    />
     
  </div>
  
</template>

<script>
export default {
  name: "Header",
  props:['todos','addTodo'],
  methods: {
      showss(title){
        if(!title.target.value){
          alert('请输入事件')
          return;
        }
        //   this.props.addTodo(title);
       this.addTodo(title.target.value)
       title.target.value = '';
      }
      
  },
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.todo-header input {
    width: 560px;
    height: 28px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 7px;
}

.todo-header input:focus {
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}




</style>
